Table.vue<template>
  <div>

    <el-row :gutter="20">
      <el-col :span="2"><el-input v-model="name" placeholder="用户名"></el-input></el-col>
      <el-col :span="2"><el-input v-model="phone" placeholder="手机号"></el-input></el-col>
      <el-col :span="2"><el-input v-model="email" placeholder="邮箱"></el-input></el-col>
      <el-col :span="2"><el-button type="success" round @click="initTableData">查找</el-button></el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="2"><el-button type="primary" round @click="showAddPaeg">添加用户</el-button></el-col>
      <el-col :span="2"><el-button type="danger" round @click="deleteSomeUser">批量删除</el-button></el-col>
    </el-row>
    <!--分页-->
    <el-pagination
      :page-size="page.pageSize"
      :total="page.totalCount"
      :current-page.sync="page.pageNo"
      @current-change="initTableData"
      @size-change="handleSizeChange"
      :page-sizes="[2, 3, 5, 10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!--表格内容-->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="userName"
        label="用户名">
      </el-table-column>
      <el-table-column
        property="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        property="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        property="trueName"
        label="姓名">
      </el-table-column>
      <el-table-column
        property="createDate"
        label="创建时间">
      </el-table-column>
      <el-table-column
        property="updateDate"
        label="修改时间">
      </el-table-column>
      <el-table-column
        label="操作"
        width="130"
        align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.$index, scope.row, $event);"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-弹出层-->
    <el-dialog
      :title="pageName"
      :visible.sync="isShowEditDialog"
      width="430px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="formFileds"
        label-width="55px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formFileds.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPwd">
          <el-input v-model="formFileds.userPwd" ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="trueName">
          <el-input v-model="formFileds.trueName" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formFileds.email" ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formFileds.phone" ></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formFileds.roleId" multiple placeholder="请选择">
            <el-option
              v-for="r in roleList"
              :key="r.id"
              :label="r.roleName"
              :value="r.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../../api/TutorialDataApi";
export default {
    name: "Table",
    data() {
      return {
        //弹出层数据
        formFileds: {},
        pageName:'',//弹出层名字
        tableData: [],
        roleList: [], //角色集合
        page: { //分页参数
          pageNo: 1,
          pageSize: 2,
          totalCount: 0
        },
        name:'',
        phone: '',
        email:'',
        isShowEditDialog: false,
        multipleSelection: [],
        userId:[],
      }
    },
    methods: {
      // pageSize改变时
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.initTableData();
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //显示添加页面
      showAddPaeg(){
        this.isShowEditDialog = true;
        this.formFileds={};
        this.pageName = '添加用户';
      },

      handleRowClick(row, event, column) {

        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {

        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {

        // 清空编辑表单
        this.$refs.editForm.resetFields();
      },
      rowEdit(index, row) {
        this.isShowEditDialog = true;
        this.pageName='修改用户';
        axios.get('http://localhost:8081/user/selectAllUserRole?userId='+ row.id)
          .then(res => {
            if (res.data.code == 2000) {
                this.formFileds = res.data.data
            }
          })
      },
      handleEdit() {
        axios.post('http://localhost:8081/user/saveUser',this.formFileds )
          .then(res => {
            if (res.data.code == 2000) {
              this.isShowEditDialog=false;
              this.initTableData();
              this.$message.success('保存成功');
            }
          })
      },
      rowDel(index, row, event) {
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          axios.get('http://localhost:8081/user/deleteUserAndRole?userId='+ row.id)
            .then(res => {
              if (res.data.code == 2000) {
                this.initTableData()
                this.$message.success('删除成功');
              }
            })
        });
      },
      initTableData() {//初始化表数据及模糊查询
        var url = "http://localhost:8081/user/selectAllUser?name="+this.name+"&phone="+this.phone+"&email="
        +this.email+"&pageNo=" +this.page.pageNo+"&pageSize="+this.page.pageSize
        axios.get(url)
          .then(res => {
            console.log(res.data)
            if (res.data.code == 2000) {
              this.page.totalCount = res.data.data.total
              this.tableData = res.data.data.records
            }
          })
      },
      //初始化角色数据
      initRoleData() {
        axios.get('http://localhost:8081/role/selectAllRole')
          .then(res => {
            this.roleList = res.data.data
          })
      },
      //批量删除
      deleteSomeUser(){
        for (var i=0;i<this.multipleSelection.length;i++){
          this.userId.push(this.multipleSelection[i].id)
        }
        axios.get('http://localhost:8081/user/deleteSomeUser?userId='+this.userId)
          .then(res => {
            if (res.data.code == 2000) {
              this.initTableData();
              this.$message.success('删除成功');
            }
          })
      },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {
        this.$refs.list.clearSelection();
        this.$refs.list.toggleRowSelection(row);
      }
    },
    mounted() {
      this.initTableData()
      this.initRoleData()
    }
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>


